<template>
  <!-- 消防信息 -->
  <div>
    <public-modal
      :footer="false"
      :publicVisible="publicVisible"
      :title="title"
      cancelContext="拒绝"
      confirmContext="通过"
      modalStyle="detailModal"
      width="1040px"
      @cancel="cancel"
    >
      <div slot="content" class="content flex column">
        <div class="main-tenant-info-wrap flex">
          <div class="main-tenant-img-wrap">
            <img :src="imgPrefix + rental_house_tenant_info.image" class="main-tenant-img" />

            <div class="main-tenant-name text-overflow">
              主租人1:{{ rental_house_tenant_info.rentalHouseTenantName }}
            </div>
          </div>

          <div class="main-tenant-info f1 flex">
            <div class="f1 main-tenant-info-col flex column justify-around">
              <div class="form-item">
                <div class="label">联系电话:</div>
                <div class="value">{{ rental_house_tenant_info.mobile }}</div>
              </div>
              <div class="form-item">
                <div class="label">证件照片:</div>
                <div class="click" @click="werImg('rentalHouseTenantImage')">
                  <img
                    id="rentalHouseTenantImage"
                    :data-original="imgPrefix + rental_house_tenant_info.rentalHouseTenantImage"
                    :src="imgPrefix + rental_house_tenant_info.rentalHouseTenantImage"
                    style="display: none"
                  />
                  查看
                </div>
              </div>
              <div class="form-item">
                <div class="label">身份证号:</div>
                <div class="value">{{ rental_house_tenant_info.idCard }}</div>
              </div>
              <div class="form-item">
                <div class="label">户籍地址:</div>
                <div class="value">
                  <a-tooltip placement="top">
                    <template slot="title">
                      {{ rental_house_tenant_info.residenceDetail }}
                    </template>
                    {{ rental_house_tenant_info.residenceDetail }}
                  </a-tooltip>
                </div>
              </div>
              <div class="form-item">
                <div class="label">工作单位:</div>
                <div class="value">
                  <a-tooltip placement="top">
                    <template slot="title">
                      {{ rental_house_tenant_info.workUnit }}
                    </template>
                    {{ rental_house_tenant_info.workUnit }}
                  </a-tooltip>
                </div>
              </div>
            </div>
            <div class="f1 main-tenant-info-col flex column justify-around">
              <div class="form-item">
                <div class="label">租房时间:</div>
                <div class="value">
                  {{ formatDate(rental_contract_info.beginTime) }} -
                  {{ formatDate(rental_house_tenant_info.endTime) }}
                </div>
              </div>
              <div class="form-item">
                <div class="label flex justify-between"><span>租</span> <span>期:</span></div>
                <div class="value">{{ rental_contract_info.leaseTerm }}月</div>
              </div>
              <div class="form-item">
                <div class="label flex justify-between"><span>房</span> <span>租:</span></div>
                <div class="value">{{ rental_contract_info.rentalRent }}/月</div>
              </div>
              <div class="form-item">
                <div class="label">租房用途:</div>
                <div class="value">{{ getDictType(rental_use, rental_contract_info.rentalUse) }}</div>
              </div>
              <div class="form-item">
                <div class="label">租房合同:</div>
                <div class="click" @click="jump_contract_detail(rental_contract_info)">查看</div>
              </div>
            </div>
          </div>
        </div>

        <div class="mian-tenant-family-members-wrap f1 flex">
          <a-row>
            <a-col v-for="(item, index) in house_history_cohabit_list" :key="index" :span="12" class="col-cus-style">
              <div class="mian-tenant-family-member flex">
                <div class="family-member-img-wrap flex column align-center justify-around">
                  <img :src="imgPrefix + item.image" class="family-member-img" />
                  <div class="member-relationship">{{ getDictType(tenant_relationship, item.relationship) }}</div>
                  <div class="member-name">{{ item.rentalHouseTenantName }}</div>
                </div>
                <div class="family-member-info-wrap f1 flex column justify-around">
                  <div class="form-item">
                    <div class="label">联系电话:</div>
                    <div class="value">{{ item.mobile }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">证件照片:</div>
                    <div class="click" @click="werImg('rentalHouseTenantImage2')">
                      <img
                        id="rentalHouseTenantImage2"
                        :data-original="imgPrefix + item.rentalHouseTenantImage"
                        :src="imgPrefix + item.rentalHouseTenantImage"
                        style="display: none"
                      />查看
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label">身份证号:</div>
                    <div class="value">{{ item.idCard }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">户籍地址:</div>
                    <div class="value">
                      <a-tooltip placement="top">
                        <template slot="title">
                          {{ item.residenceDetail }}
                        </template>
                        {{ item.residenceDetail }}
                      </a-tooltip>
                    </div>
                  </div>
                  <div class="form-item">
                    <div class="label">工作单位:</div>
                    <div class="value">
                      <a-tooltip placement="top">
                        <template slot="title">
                          {{ item.workUnit }}
                        </template>
                        {{ item.workUnit }}
                      </a-tooltip>
                    </div>
                  </div>
                </div>
              </div></a-col
            >
          </a-row>
        </div>
      </div>

      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'
export default {
  name: 'detailModal',
  components: { publicModal },
  mixins: [comMethods],
  data() {
    return {
      title: '',
      publicVisible: false,
      rental_contract_info: {}, // 	合同信息
      rental_house_tenant_info: {}, // 租户信息
      house_history_cohabit_list: [], // 同住人员信息

      rental_use: [],
      tenant_relationship: [],
    }
  },

  methods: {
    show(records) {
      this.title = records.title
      this.publicVisible = true
      this.get_house_history_tenant_list(records.id) // 获取主租人详情
      this.get_dict()
    },

    /**
     * @description 获取主租人详情
     * @param {number} id
     */
    async get_house_history_tenant_list(id) {
      let {
        result: { rentalHouseTenantInfo, rentalContractInfo },
      } = await getAction('/rental/house_history_tenant/detail', { id })
      this.rental_contract_info = rentalContractInfo // 	租户信息
      this.rental_house_tenant_info = rentalHouseTenantInfo // 合同信息

      this.get_house_history_cohabit_list(rentalHouseTenantInfo.id) // 获取同住人员list
    },

    /**
     * @description 获取同住人员list
     * @param {number} houseTenantId
     */
    async get_house_history_cohabit_list(houseTenantId) {
      let {
        result: { records },
      } = await getAction('/rental/house_history_cohabit/page', { houseTenantId, pageSize: 99999 })
      this.house_history_cohabit_list = records
    },

    async get_dict() {
      let { result: rental_use } = await ajaxGetDictItems({ code: 'rental_use' })
      this.rental_use = rental_use

      let { result: tenant_relationship } = await ajaxGetDictItems({ code: 'tenant_relationship' })
      this.tenant_relationship = tenant_relationship
    },

    getDictType(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    /**
     * @description 格式化日期时间字符串，只保留日期部分。
     * @param {string} dateTimeString - 日期时间字符串
     * @returns {string} 格式化后的日期字符串
     */
    formatDate(dateTimeString) {
      if (!dateTimeString) {
        return ''
      }
      const datePart = dateTimeString.split(' ')[0]
      return datePart
    },

    jump_contract_detail(rental_contract_info) {
      this.$router.push({ path: '/rental/modules/contractDetail', query: rental_contract_info })
    },

    cancel(target) {
      this.publicVisible = false
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px;
  border-radius: 0 0 4px 4px;
}

.form-item {
  font-size: 0.14rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  display: flex;

  .label {
    width: 0.6rem;
    min-width: 0.6rem;
    font-weight: 500;
    color: #317bc8;
    text-align: right;
    margin-right: 5px;
  }

  .label-w {
    width: 0.8rem;
    min-width: 0.8rem;
  }

  .value {
    color: var(--theme-modal-label-value-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .click {
    color: #47e829;
    cursor: pointer;
  }
  .click-map {
    cursor: pointer;
    text-align: right;
    font-weight: 500;
    color: #1388ff;
  }
}
.content {
  height: 7.25rem;
}
.main-tenant-info-wrap {
  margin: 0.25rem 0;
  .main-tenant-img-wrap {
    width: 1.35rem;
  }
  .main-tenant-img {
    width: 1.35rem;
    height: 1.5rem;
    border-radius: 8px;
  }

  .main-tenant-name {
    font-size: 0.14rem;
    font-weight: 500;
    color: #3a8ddf;
    background: #074685;
    border-radius: 15px;
    min-height: 0.35rem;
    border: 1px solid #0c5094;
    padding: 0.05rem 0.15rem;
    margin-top: 0.1rem;
  }

  .main-tenant-info {
    margin-left: 16px;

    .main-tenant-info-col {
      min-width: 0;
    }
  }
}

.mian-tenant-family-members-wrap {
  // overflow: hidden;
  overflow-y: scroll;
  .mian-tenant-family-member {
    width: 4.7rem;
    height: 1.77rem;
    margin-right: 10px;
    background: #0c3c6b;
  }

  .family-member-img-wrap {
    position: relative;
    margin: 0 0.3rem 0 0.1rem;

    .family-member-img {
      width: 1.12rem;
      height: 1.12rem;
      border-radius: 50%;
    }

    .member-relationship {
      position: absolute;
      top: 60%;
      left: 50%;
      width: 0.6rem;
      transform: translateX(-50%);
      background: #1a6fc4;
      border-radius: 0.22rem;
      font-size: 0.14rem;
      font-weight: 500;
      color: #a1cfff;
      padding: 0 0.16rem;
    }

    .member-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--theme-modal-label-value-color);
    }
  }

  .family-member-info-wrap {
    min-width: 0;
  }
}

.col-cus-style {
  padding: 0.08rem;
  &:nth-child(2n) {
    padding-left: 0;
  }
}
</style>
